﻿<%@ Page Title="" Language="C#" MasterPageFile="~/skin.Master" AutoEventWireup="true" CodeBehind="trend.aspx.cs" Inherits="DataShow.trend.trend" %>

<asp:Content ID="headers" ContentPlaceHolderID="home_header" runat="server">
    <link rel="stylesheet" href="/css/compiled/form-showcase.css" type="text/css" media="screen" />
    <link href="/css/lib/bootstrap.datepicker.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        .fp {
           display:inline-block;
            width:118px;
        }
        label {
            margin-bottom:0;
        }
    </style>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="cph_home" runat="server">
    <div style="margin-top: 10px;">
        <ul class="breadcrumb">
            <li><a href="<%:URL %>">首页</a> <span class="divider">/</span></li>
            <li class="active">预报趋势</li>
        </ul>
    </div>
    <div class="row-fluid">
        <div class="span3">
            <div class="widget-box">
                <div class="widget-title">
                    <span class="icon">
                        <i class="icon-plus"></i>
                    </span>
                    <h5>加载条件</h5>
                </div>
                <div class="widget-content nopadding">
                    <h4>日期选择</h4>
                    <div class="field-box">
                        <label>请选择日期:</label>
                        <asp:TextBox runat="server" ID="txt_time" ClientIDMode="Static" CssClass="input-large datepicker" />
                    </div>
                    <hr />
                    <h4 class="inline">站点</h4>
                    <br />
                    <input type="radio" name="chx_site" id="cbx_site_lyg" value="58044" class="chx_site" checked="checked" /><label for="cbx_site_lyg">连云港</label>
                    <input type="radio" name="chx_site" id="cbx_site_dh" value="58036" class="chx_site" /><label for="cbx_site_dh">东海</label>
                    <input type="radio" name="chx_site" id="cbx_site_gy" value="58040" class="chx_site" /><label for="cbx_site_gy">赣榆</label>
                    <input type="radio" name="chx_site" id="cbx_site_gyun" value="58047" class="chx_site" /><label for="cbx_site_gyun">灌云</label>
                    <input type="radio" name="chx_site" id="cbx_site_gn" value="58048" class="chx_site" /><label for="cbx_site_gn">灌南</label>

                    <hr />
                    <h4 class="inline">时效</h4><br />
                    <input type="radio" class="scene" value="3" name="scene" id="rdo_72" checked="checked" /><label for="rdo_72">72小时</label>
                    <input type="radio" class="scene" value="5" name="scene" id="rdo_120" /><label for="rdo_120">120小时</label>


                    <hr />
                    <h4 class="inline">发报时刻</h4>
                    <br />
                    <input type="radio" id="cbx_point_06" value="H06" class="chx_point" name="chx_point" checked="checked" /><label for="cbx_point_06">H06</label>
                    <input type="radio" id="cbx_point_10" value="H10" class="chx_point" name="chx_point" /><label for="cbx_point_10">H10</label>
                    <input type="radio" id="cbx_point_16" value="H16" class="chx_point" name="chx_point" /><label for="cbx_point_16">H16</label>

                    <hr />
                    <h4 class="inline">预报产品</h4>
                    <br />
                    <input type="checkbox" class="product" id="cbx_15" value="Zyt_CityFore" data-text="国家报" /><label class="fp" for="cbx_15">国家报</label>
                    <input type="checkbox" id="cbx_1" value="EC_ThinFore" class="product" data-text="欧洲中心" /><label class="fp" for="cbx_1">欧洲中心</label>
                    <input type="checkbox" class="product" id="cbx_2" value="EnsembleFore" data-text="欧洲集合" /><label class="fp" for="cbx_2">欧洲集合</label><br />
                    <input type="checkbox" class="product" id="cbx_3" value="T639Fore" data-text="T639" /><label class="fp" for="cbx_3">T639</label>
                    <input type="checkbox" class="product" id="cbx_4" value="GrapesFore" data-text="Grapes" /><label class="fp" for="cbx_4">Grapes</label><br />
                    <input type="checkbox" class="product" id="cbx_5" value="GfsFore" data-text="Gfs" /><label class="fp" for="cbx_5">Gfs</label>
                    <input type="checkbox" class="product" id="cbx_6" value="Jma_ThinFore" data-text="JmaThin" /><label class="fp" for="cbx_6">JmaThin</label><br />
                    <input type="checkbox" class="product" id="cbx_7" value="LYGwrfFore" data-text="连云港wrf" /><label class="fp" for="cbx_7">连云港wrf</label>
                    <input type="checkbox" class="product" id="cbx_8" value="SJwrfFore" data-text="省局wrf" /><label class="fp" for="cbx_8">省局wrf</label><br />
                    <input type="checkbox" class="product" id="cbx_9" value="SHwrfFore" data-text="上海wrf" /><label class="fp" for="cbx_9">上海wrf</label>
                    <input type="checkbox" class="product" id="cbx_10" value="TQZXFore" data-text="天气在线预报" /><label class="fp" for="cbx_10">天气在线预报</label><br />
                    <input type="checkbox" class="product" id="cbx_11" value="JSjxhFore" data-text="江苏精细化预报" /><label class="fp" for="cbx_11">江苏精细化预报</label>
                    <input type="checkbox" class="product" id="cbx_12" value="STFore" data-text="省台指导预报" /><label class="fp" for="cbx_12">省台指导预报</label><br />
                    <input type="checkbox" class="product" id="cbx_13" value="Wrf3kmFore" data-text="wrf3km" /><label class="fp" for="cbx_13">wrf3km</label>
                    <input type="checkbox" class="product" id="cbx_14" value="Wrf15kmFore" data-text="wrf15km" /><label class="fp" for="cbx_14">wrf15km</label>
                    <input type="checkbox" class="product" id="cbx_16" value="NmcFore" data-text="NmcFore" /><label class="fp" for="cbx_16">NMC</label>
                    <hr />
                    <span>优化表</span><br />
                    <input type="checkbox" class="product" id="cbx_17" value="NEW_EC_ThinFore" data-text="欧洲中心预报优化" /><label class="fp" for="cbx_17">欧洲中心预报</label>
                    <input type="checkbox" id="cbx_18" value="NEW_EnsembleFore" class="product" data-text="欧洲集合优化" /><label class="fp" for="cbx_18">欧洲集合</label>
                    <input type="checkbox" class="product" id="cbx_19" value="NEW_T639Fore" data-text="T639优化" /><label class="fp" for="cbx_19">T639</label><br />
                    <input type="checkbox" class="product" id="cbx_20" value="NEW_GrapesFore" data-text="Grapes优化" /><label class="fp" for="cbx_20">Grapes</label>
                    <input type="checkbox" class="product" id="cbx_21" value="NEW_GfsFore" data-text="Gfs优化" /><label class="fp" for="cbx_21">Gfs</label><br />
                    <input type="checkbox" class="product" id="cbx_22" value="NEW_Jma_ThinFore" data-text="JmaThin优化" /><label class="fp" for="cbx_22">JmaThin</label>
                    <input type="checkbox" class="product" id="cbx_23" value="NEW_LYGwrfFore" data-text="连云港wrf优化" /><label class="fp" for="cbx_23">连云港wrf</label><br />
                    <input type="checkbox" class="product" id="cbx_24" value="NEW_SJwrfFore" data-text="省局wrf优化" /><label class="fp" for="cbx_24">省局wrf</label>
                    <input type="checkbox" class="product" id="cbx_26" value="NEW_SHwrfFore" data-text="上海wrf优化" /><label class="fp" for="cbx_15">上海wrf</label>
                    <input type="checkbox" id="cbx_34" value="NEW_TQZXFore" class="product" data-text="天气在线预报优化" /><label class="fp" for="cbx_34">天气在线预报</label>
                    <input type="checkbox" class="product" id="cbx_27" value="NEW_JSjxhFore" data-text="江苏精细化预报优化" /><label class="fp" for="cbx_27">江苏精细化预报</label><br />
                    <input type="checkbox" class="product" id="cbx_28" value="NEW_STFore" data-text="省台指导预报优化" /><label class="fp" for="cbx_28">省台指导预报</label>
                    <input type="checkbox" class="product" id="cbx_29" value="NEW_Wrf3kmFore" data-text="wrf3km优化" /><label class="fp" for="cbx_29">wrf3km</label><br />
                    <input type="checkbox" class="product" id="cbx_30" value="NEW_Wrf15kmFore" data-text="wrf15km优化" /><label class="fp" for="cbx_30">wrf15km</label>
                    <input type="checkbox" class="product" id="cbx_32" value="NEW_OptimalFore" data-text="Optimal优化" /><label class="fp" for="cbx_32">Optimal</label>
                    
                    <br />
                    <input type="button" id="btn_search" class="btn-primary btn" value="搜索" />
                </div>
            </div>
        </div>
        <div class="span9">
            <div class="widget-box">
                <div class="widget-title">
                    <span class="icon">
                        <i class="icon-plus"></i>
                    </span>
                    <h5>最高温</h5>
                </div>
                <div class="widget-content nopadding">
                    <div class="row-fluid">
                        <div class="span12">
                            <div id="tmax" style="min-width: 700px; min-height: 400px"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="widget-box">
                <div class="widget-title">
                    <span class="icon">
                        <i class="icon-plus"></i>
                    </span>
                    <h5>最低温</h5>
                </div>
                <div class="widget-content nopadding">
                    <div class="row-fluid">
                        <div class="span12">
                            <div id="tmin" style="min-width: 700px; min-height: 400px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="container" style="min-width:700px;height:400px"></div>
</asp:Content>
<asp:Content runat="server" ID="scripts" ContentPlaceHolderID="home_script">

    <script src="../js/highcharts.js"></script>
    <script src="../js/exporting.js"></script>

    <script src="/js/bootstrap.datepicker.js"></script>
    <script type="text/javascript">

        Array.prototype.del = function (n) {　//n表示第几项，从0开始算起。
            //prototype为对象原型，注意这里为对象增加自定义方法的方法。
            if (n < 0)　//如果n<0，则不进行任何操作。
                return this;
            else
                return this.slice(0, n).concat(this.slice(n + 1, this.length));
            /*
          　　　concat方法：返回一个新数组，这个新数组是由两个或更多数组组合而成的。
          　　　　　　　　　这里就是返回this.slice(0,n)/this.slice(n+1,this.length)
          　　 　　　　　　组成的新数组，这中间，刚好少了第n项。
          　　　slice方法： 返回一个数组的一段，两个参数，分别指定开始和结束的位置。
          　　*/
        }

        //克隆json
        function cloneJSON(para) {
            var rePara = null;
            var type = Object.prototype.toString.call(para);
            if (type.indexOf("Object") > -1) {
                rePara = jQuery.extend(true, {}, para);
            } else if (type.indexOf("Array") > 0) {
                rePara = [];
                jQuery.each(para, function (index, obj) {
                    rePara.push(jQuery.cloneJSON(obj));
                });
            } else {
                rePara = para;
            }
            return rePara;
        }


        $(function () {

            // datepicker plugin
            $('.datepicker').datepicker({
                format: 'yyyy-mm-dd',
                weekStart: 1,
                autoclose: true,
                todayBtn: 'linked',
                language: 'zh-CN'
            }
                ).on('changeDate', function (ev) {
                    $(this).datepicker('hide');
                });

            //高温曲线数据准备
            var maxoptions = {
                title: {
                    text: '高温趋势图',
                    x: -20 //center
                },

                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '°C'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: []
            }
            //低温曲线数据准备
            var minoptions = {
                title: {
                    text: '低温趋势图',
                    x: -20 //center
                },

                xAxis: {
                    categories: ["aa", "bb"]
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '°C'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: []
            }


            $("#cbx_site_all").click(function () {
                if (this.checked) {
                    $(".chx_site").each(function () {
                        this.checked = true;
                    })
                }
                else {
                    $(".chx_site").each(function () {
                        this.checked = false;
                    })
                }
            })
            function SearchToday() {
                $.ajax({
                    type: "GET",
                    url: "Handler.ashx",
                    data: { date: $("#txt_time").val(), station: $(".chx_site:checked").val(), scene: $(".scene:checked").val(), sendpoint: $(".chx_point:checked").val(), product: "" },
                    success: function (data) {
                        var json = JSON.parse(data);
                        maxoptions.xAxis.categories = json.Category;
                        minoptions.xAxis.categories = json.Category;
                        maxoptions.series = json.Max;
                        minoptions.series = json.Min;
                        $("#tmax").highcharts(maxoptions);
                        $("#tmin").highcharts(minoptions);
                    }
                })
            }
            SearchToday();

            $("#btn_search").click(function () {
                var date = $("#txt_time").val();
                var station = $(".chx_site:checked").val();
                var scene = $(".scene:checked").val();
                var sendpoint = $(".chx_point:checked").val();
                var products = "";
                $(".product").each(function () {
                    if (this.checked) {
                        products += $(this).val() + "|" + $(this).data("text") + ",";
                    }
                })
                $.ajax({
                    type: "GET",
                    url: "Handler.ashx",
                    data: { date: date, station: station, scene: scene, sendpoint: sendpoint, product: products.substring(0, products.length - 1) },
                    success: function (data) {
                        var json = JSON.parse(data);
                        maxoptions.xAxis.categories = json.Category;
                        minoptions.xAxis.categories = json.Category;
                        maxoptions.series = json.Max;
                        minoptions.series = json.Min;
                        $("#tmax").highcharts(maxoptions);
                        $("#tmin").highcharts(minoptions);
                    }
                })
            })
        });
        

        
    </script>
</asp:Content>
